// 创建一个文件，专门用来管理购物车相关的状态
// 1.创建切片的方法，cre...
// B1:使用  createAsyncThunk 处得异步数据
import { createSlice,createAsyncThunk } from '@reduxjs/toolkit' 
import axios from 'axios'

// 2.创建初始状态(数据--组间件使用的数据),先模拟有数据，实际上一开始是空的
const cartData = {
    list:[
        {
            id:1,
            title:"Huawei p50",
            price:5999.0,
            num:1,
            totalPrice:5999.0
        },
        {
            id:2,
            title:"iQOO 12",
            price:3999.0,
            num:2,
            totalPrice:7998.0
        },
        {
            id:3,
            title:"iQOO 9",
            price:2999.0,
            num:1,
            totalPrice:2999.0
        }
    ], //列表
    totalNum:4,
    totalPrice:16996.0,
    loading: 'idle',
    movieList:[] //电影列表
}

// B2.获取电影列表
// 使用 createAsyncThunk 定义异步action,注意：1.需要导出  2.会自动生成一个同名的action函数，所以使用的时候直接用
// cart/getMovieList 是自定义的 异步thunk的 唯一名称(类似分组，这里用cart，与普通的reducer保持一致)
export const fetchMovieList = createAsyncThunk("cart/getMovieList",async ()=>{
     console.log('get..............')
     const res = await axios.get("https://m.maoyan.com/ajax/movieOnInfoList")
     return res.data.movieList;
})

// 3.创建切片
const cartSlice = createSlice({
    name:"cart", //action的前缀（可以理解为action的分组）
    initialState:cartData,//初始数据
    // 操作state的方法
    reducers:{
        // 添加数量
        // state 数据
        // data 是一个action对象，里面包含了type、payload 
        // data = {type:"cart/add",payload:1}
        add(state,data){
            console.log('in store,',data)
            // 根据产品id 修改产品数量
            const list = state.list.map((item)=>{
                //只修改对应的产品数据
                if(item.id == data.payload){
                    item.num = item.num + 1;
                    item.totalPrice = item.num * item.price; //单个商品的小计
                }
                return item;
            })
            //因为reduc toolkit中已经默认集成了Immutable.js，数组，对象的修改可以跟基本类型一样直接赋值
            // 更新总数，总价
            let totalNum = 0;
            let totalPrice = 0;
            
            // for ... in 专门用来循环对象（如数组）
            for(let k in list){
                console.log(k,list[k])
                totalNum = totalNum + list[k].num; //
                totalPrice += list[k].totalPrice;  //
            }
            console.log(totalNum)
            state.totalNum = totalNum; //更新
            state.totalPrice = totalPrice; //更新

            // 更新列表
            state.list = list; 
        },
        cartNumReduce(state,action){
            console.log(action)
            // 获取id
            let pid = action.payload;
            // 根据id，修数量,返回一个新数组
            let list = state.list;
            let arr = list.map((item,key)=>{
                if(item.id == pid){
                    //找到对应的id,数量减1
                    if(item.num<=1){
                        let result = window.confirm("只有1件商品了，再减就删除了")
                        if(result){
                            //选了确定，就删除
                            //list.splice(key,1)
                        }
                    }
                    if(item.num>1){
                        item.num = item.num - 1;
                    }
                }
                return item;
            })
            console.log(arr)
            // 更新
            state.list = arr;

            // 更新总数，总价
            let totalNum = 0;
            let totalPrice = 0;
            
            // for ... in 专门用来循环对象（如数组）
            for(let k in list){
                console.log(k,list[k])
                totalNum = totalNum + list[k].num; //
                totalPrice += list[k].totalPrice;  //
            }
            console.log(totalNum)

            state.totalNum = totalNum; //更新
            state.totalPrice = totalPrice; //更新

        },
        delGoods(state,action){
            // 取 id
            const id = action.payload;
            // 取商品
            const list = state.list;
            
            // 根据id删除\得到新的
            const arr = list.filter((item)=>{
                return item.id !=id;
            })
            state.list = arr;

            // 更新总数，总价
            let totalNum = 0;
            let totalPrice = 0;
            
            // for ... in 专门用来循环对象（如数组）
            for(let k in arr){
                console.log(k,arr[k])
                totalNum = totalNum + arr[k].num; //
                totalPrice += arr[k].totalPrice;  //
            }
            console.log(totalNum)

            state.totalNum = totalNum; //更新
            state.totalPrice = totalPrice; //更新
        },
        delAllPro(state,action){
            console.log('准备清空了。。。')
            // 删除所有，相当清空
            state.list = [];
            state.totalNum = 0;
            state.totalPrice = 0
        }
    },
    // B2.配置异步reducers
    extraReducers:(builder)=>{
        // 处理电影列表(3个状态)
        builder
        .addCase(fetchMovieList.pending,(state)=>{
            state.loading = "loading";
        })
        .addCase(fetchMovieList.fulfilled,(state,action)=>{
            state.loading = 'idle';
            const listData = action.payload; //获取 异步数据

            console.log('fulfilled',listData)
            state.movieList = listData;
        })
        .addCase(fetchMovieList.rejected,(state,payload)=>{
            state.loading = "idle";
        })
    }
})

// 4. 导出 action
// 我们就不用去自己定义 action 生成器函数，redux Toolkit帮我们实现了。
// action 生成器函数的名称我们规定同 reducer 函数名称。
export const {add,cartNumReduce,delGoods,delAllPro}= cartSlice.actions

// 5.默认 导出reducer
export default cartSlice.reducer; 
